<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>

	<body>

		<ul id="list">

		</ul>

		<button class="load-more">加载更多</button>

	</body>

	<script type="text/javascript">
		var oUl = document.getElementById('list');
		var lastOrder = 0;
		console.log(oUl, 1);
		var url = 'https://api.readhub.me/topic?pageSize=10';
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.send(null);
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4 && xhr.status == 200) {
				var jsonStr = xhr.responseText;
				var jsonObj = JSON.parse(jsonStr);
				console.log(jsonObj)
				var oUl = document.getElementById('list');
				console.log(oUl);
				lastOrder = jsonObj.data[jsonObj.data.length - 1].order;
				console.log(lastOrder, 1000000000);
				var arr = jsonObj.data.map(function(value) {
					//						console.log(value);
					var date = new Date(value.createdAt);
					//						console.log(date);
					var dateStr = getDateStr(date);
					return `<li><h3>${value.title}</h3><p>${value.summary}</p><span>${dateStr}</span></li>`;
				});
				console.log(arr);

				var html = arr.join('');

				oUl.innerHTML = html;

			}

		}

		var oUl = document.getElementById('list');
		console.log(oUl, 2);

		var loadMoreBtn = document.getElementsByClassName('load-more')[0];
		loadMoreBtn.onclick = function() {
			//请求 最后一条数据 之前的数据

			var url = 'https://api.readhub.me/topic?lastCursor='+lastOrder+'&pageSize=10';

			var xhr = new XMLHttpRequest();
			xhr.open('GET', url, true);
			xhr.send(null);

			xhr.onreadystatechange = function() {

				if(xhr.readyState == 4 && xhr.status == 200) {

					var jsonStr = xhr.responseText;
					var jsonObj = JSON.parse(jsonStr);
					console.log(jsonObj)

					var oUl = document.getElementById('list');
					console.log(oUl);

					lastOrder = jsonObj.data[jsonObj.data.length - 1].order;
					console.log(lastOrder, 1000000000);

					var arr = jsonObj.data.map(function(value) {
						//						console.log(value);
						var date = new Date(value.createdAt);
						//						console.log(date);
						var dateStr = getDateStr(date);
						return `<li><h3>${value.title}</h3><p>${value.summary}</p><span>${dateStr}</span></li>`;
					});
					console.log(arr);

					var html = arr.join('');

					oUl.innerHTML += html;

				}

			}

		}

		function getDateStr(date) {
			var now = new Date();

			var time = now.getTime() - date.getTime();

			var minutes = Math.floor(time / 1000 / 60);

			var resStr = '';
			if(minutes < 60) {
				resStr = minutes + '分钟前';
			} else if(minutes < 60 * 24) {
				resStr = parseInt(minutes / 60) + '小时前';
			} else if(minutes < 60 * 24 * 30) {
				resStr = parseInt(minutes / 60 / 24) + '天前';
			} else if(minutes < 60 * 24 * 30) {
				resStr = parseInt(minutes / 60 / 24) + '天前';
			}
			return resStr;
		}
	</script>

</html>